<template>
  <div class="club-dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click="$router.push('/campus/club/recruitment')">
          <div class="card-content">
            <i class="el-icon-document card-icon"></i>
            <div class="card-title">招新管理</div>
            <div class="card-description">发布和管理社团招新信息</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click="$router.push('/campus/club/application')">
          <div class="card-content">
            <i class="el-icon-user card-icon"></i>
            <div class="card-title">申请审核</div>
            <div class="card-description">审核学生的入团申请</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click="$router.push('/campus/club/interviewSlot')">
          <div class="card-content">
            <i class="el-icon-time card-icon"></i>
            <div class="card-title">面试时段</div>
            <div class="card-description">设置和管理面试时间安排</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover" @click="$router.push('/campus/club/appointment')">
          <div class="card-content">
            <i class="el-icon-date card-icon"></i>
            <div class="card-title">面试预约</div>
            <div class="card-description">管理学生面试预约信息</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card class="statistics-card">
          <div slot="header" class="clearfix">
            <span>招新统计</span>
          </div>
          <div class="statistics-content">
            <div class="stat-item">
              <span class="stat-label">进行中招新</span>
              <span class="stat-value">{{ (statistics && statistics.activeRecruitments) || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">待审核申请</span>
              <span class="stat-value">{{ (statistics && statistics.pendingApplications) || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">今日面试</span>
              <span class="stat-value">{{ (statistics && statistics.todayInterviews) || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="recent-activity-card">
          <div slot="header" class="clearfix">
            <span>最近活动</span>
          </div>
          <div class="activity-list">
            <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
              <i :class="activity.icon" class="activity-icon"></i>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getClubStatistics, getMyClubContext } from '@/api/campus/club'

export default {
  name: 'ClubDashboard',
  data() {
    return {
      statistics: {
        activeRecruitments: 0,
        pendingApplications: 0,
        todayInterviews: 0
      },
      recentActivities: [
        {
          id: 1,
          icon: 'el-icon-document',
          title: '发布了新的招新信息',
          time: '2小时前'
        },
        {
          id: 2,
          icon: 'el-icon-user',
          title: '审核了3个学生申请',
          time: '4小时前'
        },
        {
          id: 3,
          icon: 'el-icon-date',
          title: '确认了2个面试预约',
          time: '6小时前'
        }
      ]
    }
  },
  created() {
    this.loadStatistics()
  },
  methods: {
    async loadStatistics() {
      const ctx = await getMyClubContext()
      const clubId = ctx?.data?.clubId
      if (!clubId) return
      getClubStatistics(clubId).then(response => {
        if (response && response.code === 200) {
          this.statistics = response?.data || this.statistics
        }
      }).catch(() => {
        // 如果获取失败，使用默认值
        this.statistics = {
          activeRecruitments: 2,
          pendingApplications: 5,
          todayInterviews: 3
        }
      })
    }
  }
}
</script>

<style scoped>
.club-dashboard {
  padding: 20px;
}

.dashboard-card {
  cursor: pointer;
  transition: all 0.3s;
  height: 120px;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-content {
  text-align: center;
  padding: 20px 0;
}

.card-icon {
  font-size: 32px;
  color: #409EFF;
  margin-bottom: 10px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.card-description {
  font-size: 12px;
  color: #909399;
}

.statistics-card, .recent-activity-card {
  height: 300px;
}

.statistics-content {
  padding: 20px 0;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.activity-list {
  max-height: 200px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  font-size: 16px;
  color: #409EFF;
  margin-right: 10px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 2px;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}
</style>
